<template>
  <div class="test">
    <VTable
      :tableData="tableData"
      :tableHeader="tableHeader"
      :tableHandle="''"
      :tableHandle1="''"
      :tableHandle2="''"
      :tableSort="tableSort"
      v-loading="listLoading">
    </VTable>
    <div class="page-wrap" v-if="tableData">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="tableData.size"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import VTable from '../../components/VTable.vue'
  var moment = require('moment')
  import {mapState, mapGetters} from 'vuex'
  import * as types from '../../store/mutations-type'
  export default {
    data () {
      return {
        currentPage: 1,
        limit: 20,
        status: true,
        listLoading: false,
        tableHeader: [
          {prop: 'orderCode', label: '订单编号'},
          {prop: 'coName', label: '商家公司'},
          {prop: 'userName', label: '收货人账号', width: 130},
          {prop: 'consignee', label: '收货人姓名', width: 130},
          {prop: 'mobile', label: '收货人电话', width: 130},
          {prop: 'deliveryAddress', label: '收货地址'},
          {prop: 'createTime', label: '创建时间', width: 180, formatter: this.formatterCreatetime}
        ]
      }
    },
    components: {
      VTable
    },
    props: ['balId'],
    methods: {
      tableRowClassName (row, index) {
        if (index === 1) {
          return 'info-row'
        } else if (index === 3) {
          return 'positive-row'
        }
        return ''
      },
      /**
       * 时间格式化
       * @param row
       * @returns {string}
       */
      formatterCteatetime (row) {
        return moment(new Date(row.createTime)).format('YYYY-MM-DD hh:mm:ss')
      },
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      /**
       * 翻页
       * @param val
       */
      handleCurrentChange (val) {
        this.currentPage = val
        this.getTableData()
      },
      getTableData () {
        this.$store.dispatch(types.BORDER_REQ_LIST, '?pageIndex=' + this.currentPage + '&pageSize=' + this.limit + '&balId=' + this.balId)
      },
      /**
       * 列表排序
       * @param column
       * @param prop
       * @param order
       */
      tableSort (column, prop, order) {
      }
    },
    computed: {
      ...mapState({
        dialogVisible: state => state.border.dialogVisible,
        checkNum: state => state.border.checkNum
      }),
      ...mapGetters({
        tableData: 'border_tableData'
      })
    },
    mounted () {
      this.getTableData()
    }
  }
</script>
<style>
  .test{
    width: 1000px;
  }
</style>
